Trong đồ họa máy tính, chúng ta phân biệt giữa Vector và Bitmap đồ họa. Đồ họa vector (như SVG) mô tả hình ảnh thông qua các hình dạng logic; mọi phần tử đều là một đối tượng tồn tại lâu dài trong DOM. Ngược lại, đồ họa bitmap (như HTML5 Canvas) hoạt động với mạng lưới các điểm màu.

1. Sự chuyển đổi sang Canvas

Mặc dù SVG dễ dàng định dạng hơn bằng CSS, trình duyệt phải theo dõi từng nút. Đối với nhu cầu hiệu suất cao như trò chơi có hàng nghìn thành phần di chuyển, API Canvas vượt trội hơn. Nó cung cấp một phần tử DOM duy nhất bao bọc bề mặt vẽ — về cơ bản là một "bản phác thảo trống".

2. Không gian vẽ

Phần tử <canvas> là một "hộp đen" cho đến khi chúng ta khởi tạo không gian. Các phương thức của đối tượng này cung cấp giao diện vẽ thực tế, tách rời phần tử hiển thị khỏi logic render.

3. Nhận thức về không gian tên

Trong đồ họa dựa trên XML như SVG, thuộc tính xmlns="http://www.w3.org/2000/svg" rất quan trọng. Nó báo hiệu trình duyệt chuyển từ việc phân tích HTML chuẩn sang lược đồ đồ họa cụ thể, cho phép các thẻ hình dạng được nhận diện như các đối tượng tương tác.